<script setup>

import {ref,onMounted} from "vue";
//引入api
import {queryForwarderInquiry} from "@/api/forwarderInquiry.js";
//引入路由
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
//路由实例
const router=useRouter();
//分页信息
const page=ref(1);//当前页
const pageSize=ref(10);//每页记录数
const total=ref(0);//总记录数

const status=ref([
  {
    value: '1',
    label: '未报价'
  },
  {
    value: '2',
    label: '报价中'
  },
  {
    value: '3',
    label: '已报价'
  }
]);
//表格数据
const tableData = ref([])
//每页记录数变化
function chgsize(size){
  //更改每页记录数
  pageSize.value=size;
  //从每页开始查询
  page.value=1;
  //查询数据
  initDate();
}
//页面发生变化
function chgpg(pg){
  //更改当前页
  page.value=pg;
  //查询数据
  initDate();
}

const forwarderInquiry=ref({
  customer_id: "",
  quote_coding: "",
  quote_data: "",
  type_goods: "",
  transport_way: "",
  route:"",
  port_of_departure: "",
  port_of_destination: "",
  quotation_terms:"",
  description_goods:"",
  hs_code:"",
  cabinet_type:"",
  destination:"",
  estimate_vaule:"",
  tariff_ratio:"",
  ocean_freight:"",
  customs_clearance:"",
  dispatch:"",
  status:""
});

//添加货代
function add(){
  router.push("/forwarderInquiry/add");
}
//编辑货代
function update(quote_coding){
  router.push({path:"/forwarderInquiry/update",query:{quote_coding}});
}
//报价跳转
function destinationIndex(){
  router.push("/forwarderInquiry/DestinationIndex");
}
//重置
function reset() {
  forwarderInquiry.value= {
    quote_coding: "",
    quotation: "",
    status: ""
  };
  initDate();
}
//查询数据
async function initDate() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    quote_coding: forwarderInquiry.value.quote_coding,
    quotation: forwarderInquiry.value.quotation,
    status: forwarderInquiry.value.status
  };
  let res = await queryForwarderInquiry(data);
  if (res.code === 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }else {
    ElMessage({
      message: "查询失败",
      type: "error"
    })
  }
}
//生命周期 钩子
onMounted(()=>{
  initDate();
})
</script>

<template>
  <div>
  <div style="margin-top: 20px">
    <el-row>
      <el-col :span="6">
        <el-form-item label="询价编码:">
          <el-input v-model="forwarderInquiry.quote_coding"
                    placeholder="请输入"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="订单编码:">
          <el-input v-model="forwarderInquiry.quotation"
                    placeholder="请输入"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="状态:">
          <el-select v-model="forwarderInquiry.status" placeholder="请选择">
            <el-option v-for="item in status"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-button type="primary" @click="initDate" >查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-row>

  </div>
  <div>
    <!--    功能按钮-->
    <div style="text-align: right">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <!--    客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="行号" width="150" header-align="center" align="center"/>
      <el-table-column prop="quote_coding" label="询价编码" width="150" header-align="center"/>
      <el-table-column prop="quotation" label="订单编码" width="150" header-align="center"/>
      <el-table-column prop="quote_data" label="询价时间" width="200" header-align="center"/>
      <el-table-column prop="status" label="状态" width="150" header-align="center">
        <template v-slot="{row}">
          <span v-if="row.status===1">未报价</span>
          <span v-else-if="row.status===2">报价中</span>
          <span v-else >已报价</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{row}">
          <el-button type="primary" @click="add(row)">编辑</el-button>
          <el-button type="primary" @click="destinationIndex(row)">查看报价</el-button>
          <el-button type="primary">催促报价</el-button>
          <el-button type="primary" @click="update(row.quote_coding)">更新出运</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <div style="background-color: white ; height: 50px;line-height: 50px">
      <el-pagination
        background
        :page-size="pageSize"
        layout="total, sizes, ,prev, pager, next ,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
  </div>
</template>

<style scoped>

</style>
